<template>
<div>
<!--  头部-->
  <div style=" justify-content: space-between;height: 60px; background-color: rgb(78 78 78); display: flex; align-items: center; padding: 0 20px;">
    <div style="color: white; font-size: 20px; font-weight: bold; display: flex; align-items: center; gap: 10px;">
<!--      <el-icon style="font-size: 30px;"><UserFilled /></el-icon>MBTI职业性格测试系统-->
    </div>
    <div style="color: white; font-size: 20px; font-weight: bold; display: flex; align-items: center; gap: 10px;">
      MBTI职业性格测试系统
    </div>
    <div style="color: white; font-size: 20px; font-weight: bold; display: flex; align-items: center; gap: 10px;">
      <span>欢迎您，{{ data.user.name }}</span>
    </div>
  </div>
<!---------------------------------------------------------------------------------------->
  <el-menu
      router
      :default-active="router.currentRoute.value.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-menu-item index="/manager/question"><el-icon><Document/></el-icon>题库管理</el-menu-item>
    <el-menu-item index="/manager/organization"><el-icon><Finished/></el-icon>组织管理</el-menu-item>
    <el-menu-item index="/manager/result"><el-icon><DataAnalysis/></el-icon>测试结果</el-menu-item>
    <el-sub-menu>
      <template #title>
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/manager/employee">管理员信息</el-menu-item>
      <el-menu-item index="/manager/student">学生信息</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/login"><el-icon><SwitchButton/></el-icon>退出登录</el-menu-item>
  </el-menu>
  <div style="display: flex">

<!--数据展示区-->
    <div style="flex: 1;width: 0;background-color: #FFFFFF;padding: 10px">
      <RouterView />
    </div>
  </div>
</div>
</template>

<script setup>
import router from "@/router/index.js";
import { reactive } from "vue";

const data = reactive({
  user:JSON.parse(localStorage.getItem('xm-pro-user'))
})
</script>
